<template>
<banner class="my-concact" :src="require('@/assets/images/2.jpeg')">
    <section-title>
        <h3>联 系 我</h3>
        <p>Contact Info</p>
    </section-title>

    <img class="me-head" src="@/assets/images/me.jpg" alt="me" />

    <ul class="row">
        <li>
            <i class="ico ico-home"></i>
            <p>深圳市宝安区新安街道水口花园东九巷</p>
        </li>
        <li>
            <i class="ico ico-phone"></i>
            <p>15013514981</p>
        </li>
        <li>
            <i class="ico ico-email"></i>
            <p>cqm918666@163.com</p>
        </li>
    </ul>
</banner>
</template>

<script>
import Banner from "@/components/banner";
import sectionTitle from "@/components/section-title";

export default {
    name: "MySkills",
    components: {
        Banner,
        sectionTitle,
    },
};
</script>

<style lang="less" scoped>
.my-concact {
    h1.section-title {
        color: #fff;
        border-bottom: none;

        h3 {
            color: #fff;
        }
    }

    .me-head {
        display: block;
        margin: 25px auto;
        width: 150px;
        height: 150px;
        border-radius: 50%;
    }

    .row {
        position: relative;
        display: flex;
        flex-wrap: wrap;
        padding: 30px 0;
        text-align: center;
        color: #fff;
        font-size: 22px;

        .ico {
            display: block;
            width: 22px;
            height: 22px;
            margin: 0 auto 15px;

            &.ico-home {
                background: url("../assets/images/ico-home.svg");
                background-size: cover;
            }

            &.ico-phone {
                background: url("../assets/images/ico-phone.svg");
                background-size: cover;
            }

            &.ico-email {
                background: url("../assets/images/ico-email.svg");
                background-size: cover;
            }
        }

        li {
            flex: 0 0 33%;
            font-size: 16px;
        }
    }

    @media (max-width: 590px) {
        .row {
            display: block;

            li {
                margin-top: 20px;
            }
        }
    }
}
</style>
